<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{$site.name|default=''}</title>
  <script src="__CDN__/assets/login/js/tailwindcss.js"></script>
  <style>
    * {
      transform: 500ms;
    }

    #login {
      border-radius: 7px 7px 7px 7px;
      border: 2px solid #FFFFFF;
      padding-top: 43px;
      padding-bottom: 67px;
      background-color: rgba(255, 255, 255, .2);
      backdrop-filter: blur(10px);
      width: 552px;
      height: 590px;
    }

    .input {
      padding: 15px 20px;
      background-color: #fff;
      border-radius: 8px;
      box-sizing: border-box;
      width: 420px;
      display: flex;
      gap: 24px;
      font-size: 15px;
      color: #6E757C;
      transform: 500ms;
    }

    .input>input {
      flex-grow: 1;
      outline: none;
      border: none;
    }

    #loginBtn {
      background-color: #48B5FF;
      border-radius: 9999px;
      padding: 13px 0;
      width: 100%;
      color: #FFF;
      font-size: 18px;
      font-weight: 500;
      cursor: pointer;
    }

    @media (max-width: 1500px) {
      #welcome {
        display: none;
      }

      #login {
        right: 50%;
        transform: translateX(50%);
      }

      #logo {
        margin-top: 24px;
        margin-left: 32px;
      }
    }

    @media (max-width: 700px) {
      .input {
        width: 100%;
      }
    }

    .loader {
      opacity: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 6rem;
      margin-top: 3rem;
      margin-bottom: 3rem;
      transform: 500ms;
    }

    .loader:before,
    .loader:after {
      content: "";
      position: absolute;
      border-radius: 50%;
      animation: pulsOut 1.8s ease-in-out infinite;
      filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
    }

    .loader:before {
      width: 100%;
      padding-bottom: 100%;
      box-shadow: inset 0 0 0 1rem #fff;
      animation-name: pulsIn;
    }

    .loader:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 #fff;
    }

    @keyframes pulsIn {
      0% {
        box-shadow: inset 0 0 0 1rem #fff;
        opacity: 1;
      }

      50%,
      100% {
        box-shadow: inset 0 0 0 0 #fff;
        opacity: 0;
      }
    }

    @keyframes pulsOut {

      0%,
      50% {
        box-shadow: 0 0 0 0 #fff;
        opacity: 0;
      }

      100% {
        box-shadow: 0 0 0 1rem #fff;
        opacity: 1;
      }
    }
  </style>
</head>

<body>
<img class="fixed left-0 top-0 -z-10 w-full h-full object-cover" src="https://yunlng.oss-cn-hangzhou.aliyuncs.com/public/static/admin/login/bg.png" alt="背景图片加载失败" />

<img id="logo" class="object-contain w-48 mt-20 ml-28 duration-500" src="__CDN__/assets/login/images/logo.png" alt="logo" />
<div class="absolute top-1/2 -translate-y-1/2 pb-30 left-52" id="welcome">
  <div class="text-5xl text-white font-extralight">WELCOME TO</div>
  <div class="text-6xl text-white font-bold mt-3">客户后台管理系统</div>
</div>

<div class="px-16 border absolute top-1/2 -translate-y-1/2 right-62 flex items-center flex-col gap-5 duration-500"
     id="login">
  <img class="object-contain w-36 mb-3" src="__CDN__/assets/login/images/logo2.png" alt="" />
  <form action="" method="post" id="login-form">
    <div id="errtips" class="hide"></div>
    {:token()}
    <div class="input">
      <img class="object-contain w-4" src="__CDN__/assets/login/images/user.png" alt="用户名" />
      <input type="text" id="pd-form-username" placeholder="{:__('Username')}" name="username" autocomplete="off" value="" data-rule="{:__('Username')}:required;username" />
    </div>
    <div class="input mt-5">
      <img class="object-contain w-4" src="__CDN__/assets/login/images/pwd.png" alt="密码" />
      <input type="password" id="pd-form-password" placeholder="{:__('Password')}" name="password" autocomplete="off" value="" data-rule="{:__('Password')}:required;password" />
    </div>
    {if $Think.config.fastadmin.login_captcha}
    <div class="mt-5 flex gap-3">
      <div class="input !w-auto flex-grow">
        <img class="object-contain w-4" src="__CDN__/assets/login/images/code.png" alt="验证码" />
        <input type="text" name="captcha"  placeholder="{:__('Captcha')}" data-rule="{:__('Captcha')}:required;length({$Think.config.captcha.length|htmlentities})" autocomplete="off">
      </div>
      <div class="bg-white rounded-lg flex items-center justify-center w-40">
        <img class="object-contain w-full" src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="100" height="60" onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();" />
      </div>
    </div>
    {/if}

    {if $keeyloginhours>0}
    <div class="py-6">
      <div class="form-group checkbox">
        <label class="inline text-white" for="keeplogin" data-toggle="tooltip" title="{:__('The duration of the session is %s hours', $keeyloginhours)}">
          <input type="checkbox" name="keeplogin" id="keeplogin" value="1"/>
          {:__('Keep login')}
        </label>
      </div>
    </div>
    {/if}


    <button id="loginBtn" type="submit">登陆</button>
  </form>
</div>
{include file="common/script" /}
</body>
<!--<script>-->
<!--  function login() {-->
<!--    document.querySelector("#welcome").style.display = "none";-->
<!--    const loginCard = document.querySelector("#login");-->
<!--    loginCard.style.right = "50%";-->
<!--    loginCard.style.transform = "translateX(50%)";-->
<!--    loginCard.querySelector("form").style.display = "none";-->
<!--    const loader = document.createElement("span");-->
<!--    loader.className = "loader";-->
<!--    loginCard.appendChild(loader);-->
<!--    loginCard.style.width = "276px";-->
<!--    loginCard.style.height = "363px";-->
<!--    loader.style.opacity = "1";-->
<!--  }-->
<!--</script>-->

</html>
